
// 收入情况
layui.use(['form', 'layer', 'jquery'], function () {
    var form = layui.form,
        layer = layui.layer,
        $ = layui.jquery;


    // 动态加载小说网站下拉框内容
    /* 	$.ajax({
            url: '/Manage/getParking',
            dataType: 'json',
            type: 'get',
            success: function (data) {
                let str="<option value=''>全部</option>";
                for(let i of data){
                    str+='<option value='+i.id+'>'+i.name+'</option>';
                }
                $("#website").html(str);
                form.render();
                // 重新渲染 固定写法
            }
        }); */

    // 测试数据
    //    var testData;
    //    $.ajaxSettings.async = false;
    //    $.getJSON('../json/house-price-area2.json',function(data){
    //        testData=data;
    //    });
    //    $.ajaxSettings.async = true;


    //    console.log(myRegression);
    // 接收散点图
    var scatter = showScatter();

    // 散点图事件监听
    // 注意：echarts点击事件先进行off(),能够避免2次事件
    // scatter.getZr().off('click');

    var regressionLine;

    /**
     * 点击散点图
     */
    scatter.getZr().on('click', params => {
        console.log(params);
        let point = [params.offsetX, params.offsetY];
        console.log(params.offsetY);
        if (!scatter.containPixel('grid', point)) { console.log("Out!!!"); }
        // 坐标系中任意点的坐标: result[0]--x;  result[1]--y;
        let result = scatter.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY]);

        // 计算
        if (regressionLine != null) {
            console.log(regressionLine);
            let lineY = result[0] * result[0] * result[0] * regressionLine.parameter[3]
                + result[0] * result[0] * regressionLine.parameter[2]
                + result[0] * regressionLine.parameter[1]
                + regressionLine.parameter[0];    // 0 次项
            let deltaY = result[1] - lineY;
            if (deltaY < 0 && (-deltaY) > (lineY / 2)) {
                layer.open({
                    type: 1,
                    content: '当前收入远低于平均预期收入，请考虑是否继续写作！',   //这里content是一个普通的String
                    area: ['330px', '180px']
                });
            }else
            if (deltaY < 0 && (-deltaY) < (lineY)) {
                layer.open({
                    type: 1,
                    content: '当前收入略低于平均预期收入，请警惕！',   //这里content是一个普通的String
                    area: ['330px', '180px']
                });
            }else
            if (deltaY > 0) {
                layer.open({
                    type: 1,
                    content: '当前收入高于平均预期收入！',   //这里content是一个普通的String
                    area: ['330px', '180px']
                });
            }
        }
        console.log(result);
    });



    // 监听提交
    form.on('submit(choice1)', function (data) {

        // 数据
        var newData = data.field;

        // 获取下拉框当前选中内容
        var _website = $("#website option:selected").text();
        var _novelType = $("#novelType option:selected").text();
        var _xAxis = $("#xAxis option:selected").text();
        var _yAxis = $("#yAxis option:selected").text();

        var _websiteValue = $("#website option:selected").val();
        var _novelTypeValue = $("#novelType option:selected").val();
        var _xAxisValue = $("#xAxis option:selected").val();
        var _yAxisValue = $("#yAxis option:selected").val();

        if (newData.novelType == "")
            layer.msg("请选择小说类型！");
        else {

            // 请求数据
            $.ajax({
                url: '../statistics/getInformation',
                type: 'post',
                data: {
                    dataName: _yAxisValue,
                    website: _website,
                    type: _novelType
                },
                success: function (result) {
                    if (result) {
                        console.log(result);
                        // 模拟线
                        var myRegression = ecStat.regression('polynomial', result, 3);
                        myRegression.points.sort(function (a, b) {
                            return a[0] - b[0];
                        });
                        regressionLine = myRegression;
                        console.info(regressionLine.parameter);
                        
                        // 重新渲染柱状图
                        scatter.setOption({
                            title: {
                                text: _website + '网站：' + _novelType + '小说 ' + _yAxis + ' 与 字数 的关系    点击散点图获取建议',
                                left: 'center',
                                // top: 10,
                                padding: 10
                            },
                            grid:{
                                // bottom:5
                            },
                            tooltip: {
                                trigger: 'axis',
                                snap: false
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataView: { readOnly: false },
                                    // magicType: {type: ['line', 'bar']},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                // x轴的下标刻度 -- 根据后台传回数据设置
                                name: _xAxis
                            },
                            yAxis: [{
                                // y轴的下标刻度 -- 根据后台传回数据设置
                                id: 'y1',
                                name: _yAxis
                            }, {
                                id: 'y2',
                                name: 'y2',
                                type: 'value',
                                show: false,
                                position: 'left',
                                min: 0,
                                // 此处记得改为最佳字数
                                max: 600000
                            }],

                            // 柱状图每一项对应的值
                            series: [{
                                id: 'myScatter',
                                name: '散点图',
                                data: result // -- 根据后台传回数据设置
                            }, {
                                id: 'myLine',
                                name: '回归直线',
                                data: myRegression.points,
                                lineStyle: {
                                    color: 'rgb(65, 227, 67)'
                                },
                                makePoint: {
                                    itemStyle: {
                                        color: 'transparent'
                                    },
                                    label: {
                                        show: true,
                                        position: 'left',
                                        formatter: myRegression.expression,
                                        color: 'rgb(232, 52, 59)',
                                        fontSize: 14
                                    }
                                },
                                visualMap: false
                            }/*, {
                                id: 'bestWordNum',
                                name: '最佳字数',
                                type: 'bar',
                                yAxisIndex: 1,
                                barWidth: 10,
                                itemStyle: {
                                    color: 'rgba(109, 200, 222, 1)'
                                },
                                markPoint: {
                                    data: [{
                                        type: 'max'
                                    }],
                                    itemStyle: {},
                                    label: {
                                        color: "rgba(162, 52, 52, 1)"
                                    },
                                    symbol: "pin"
                                },
                                visualMap: false,
                                // 此处添最佳字数：10是固定的
                                data: [[600000, 600000]]

                            }*/
                            ]

                        });
                    }
                },
                error: function (data) {
                    console.log("提交失败");
                }
            });
        }
    });

    // 监听网站下拉框
    form.on('select(choiceWeb)', function (data) {

        let websiteName = data.value;
        console.log(websiteName); //得到被选中的值

        // 用于 y 轴下拉框
        var qidianY = '<option value="tuijian"> 推荐 </option>';
        var feiluY = '<option value="yuepiao"> 月票 </option>' +
            '<option value="dianji"> 点击量 </option>' +
            '<option value="dashang"> 打赏 </option>' +
            '<option value="xianhua"> 鲜花 </option>';
        var jinjiangY = '<option value="jFavorite"> 收藏 </option>' +
            '<option value="jReview"> 评论数 </option>' +
            '<option value="jGift"> 礼物 </option>' +
            '<option value="jPoint"> 积分 </option>';

        // 用于小说分类下拉框
        var type1 = '<option value="悬疑" selected="">悬疑</option>' +
            '<option value="武侠" >武侠</option>' +
            '<option value="仙侠" >仙侠</option>' +
            '<option value="科幻" >科幻</option>' +
            '<option value="都市" >都市</option>' +
            '<option value="短篇" >短篇</option>' +
            '<option value="轻小说" >轻小说</option>' +
            '<option value="游戏竞技" >游戏竞技</option>' +
            '<option value="军事历史" >军事历史</option>' +
            '<option value="玄幻奇幻" >玄幻奇幻</option>' +
            '<option value="同人小说" >同人小说</option>' +
            '<option value="女频玄幻" >女频玄幻</option>' +
            '<option value="女频同人" >女频同人</option>' +
            '<option value="女频言情" >女频言情</option>' +
            '<option value="女频古代" >女频古代</option>' +
            '<option value="女频仙侠" >女频仙侠</option>';
        var type2 = '<option value="悬疑" >悬疑</option>' +
            // '<option value="短篇" selected="" >短篇</option>' +
            '<option value="同人小说" >同人小说</option>' +
            '<option value="女频玄幻" >女频玄幻</option>' +
            '<option value="女频同人" >女频同人</option>' +
            '<option value="女频言情" selected="">女频言情</option>' +
            '<option value="女频古代" >女频古代</option>' +
            '<option value="女频仙侠" >女频仙侠</option>';

        switch (websiteName) {
            case '起点':
                $("#yAxis").html(qidianY);
                $('#novelType').html(type1);
                break;
            case '飞卢':
                $("#yAxis").html(feiluY);
                $('#novelType').html(type1);
                break;
            case '晋江':
                $("#yAxis").html(jinjiangY);
                $('#novelType').html(type2);
                break;
            default:
                // 默认起点
                $("#yAxis").html(qidianY);
                $('#novelType').html(type1);
                break;
        }
        form.render();
    });
});



// 散点图测试
function showScatter() {
    console.log("hello");
    // 基于准备好的dom，初始化echarts实例
    var scatter1 = echarts.init(document.getElementById('bar1') );

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'Dispersion of house price based on the area',
            left: 'center',
            top: 0
        },
        
        /*    visualMap: [{
               id: 'map1',
               min: 0,
               max: 159980,
               dimension: 1,
               orient: 'vertical',
               right: 10,
               top: 'center',
               text: ['HIGH', 'LOW'],
               show: false,
               calculable: true,
               inRange: {
                   color: ['#f2c31a', '#24b7f2']
               }
           }], */
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                snap: false
            }
        },
        xAxis: [{
            name: 'testXAxis',
            type: 'value',
            min: 0
        }],
        yAxis: [{
            id: 'y1',
            name: 'y1',
            type: 'value',
            position: 'left',
            min: 0
        }, {
            id: 'y2',
            name: 'y2',
            type: 'value',
            show: false,
            position: 'left',
            min: 0,
            max: 10
        }],
        series: [{
            id: 'myScatter',
            name: '散点',
            type: 'scatter',
            symbolSize: 5,
            yAxisIndex: 0,
            data: [],
        }, {
            id: 'myLine',
            name: '拟合直线',
            type: 'line',
            symbolSize: 5,
            smooth: true,
            showSymbol: false,
            visualMap: false,
            yAxisIndex: 0,
            data: []
        }, {
            id: 'bestWordNum',
            name: '拟合直线',
            type: 'bar',
            yAxisIndex: 1,
            barWidth: 10,
            itemStyle: {
                color: 'rgba(109, 200, 222, 1)'
            },
            visualMap: false,
            // data: [[50000, 10]]

        }]
    };


    // 使用刚指定的配置项和数据显示图表。
    scatter1.setOption(option);


    return scatter1;
}

